<template>
  <div class="allviedeo-box">
    <TipsView :icon="Tipsicon" :text="Tipstext" ref="childTips"></TipsView>
    <div class="allvideo-info-box">
      <div class="hot-video">
        <div class="hot-video-title">
          <div class="title-left">
            <p class="title">推荐视频号</p>
            <!-- <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span> -->
          </div>
          <div class="title-right">
            <!-- <i class="iconfont icon-shuaxin1" style="padding-right: 5px"></i
            >换一换 -->
          </div>
        </div>
        <div class="hot-video-info">
          <div class="all-hot-video">
            <!---单个用户 -->
            <div class="all-hot-video-box" v-for="(data,index) in userdata " :key="data.uid">
              <div class="all-hot-author-items">
                <div class="author-box-info">
                  <div class="hot-author-img" @click.stop="goUserHome(data.uid)" >
                    <img :src="data.avatar" :alt="data.username" />
                  </div>
                  <div class="hot-author-box">
                    <div class="author-box-text">
                      <div class="hot-author-name" @click.stop="goUserHome(data.uid)">{{data.username}}</div>
                      <div class="hot-author-info">
                        {{data.lable}}
                        <!--- 超过23/25个字后面的以...代替--->
                      </div>
                    </div>

                    <div class="follow-button">
                      <button :class=" !data.follow? 'follow':'follow followed'" @click="handerFollow(data.uid,index)">
                        <i :class="!data.follow? 'iconfont icon-jiahao':''"></i><span>{{!data.follow? '关注':'已关注'}}</span>
                      </button>

                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
      <div class="hiq-video">
        <div class="hiq-video-title">
          <div class="title-left">
            <p class="title">优质视频号推荐</p>
            <!-- <span class="title-more"
              >更多<i class="iconfont icon-youjiantou"></i
            ></span> -->
          </div>
        </div>
        <div class="all-hiq-video">
          <div class="hiq-video-items" v-for="(data,index) in compomentList" :key="data.uid">
            <div class="header">
              <div class="left">
                <div class="hiq-author-img" @click="goUserHome(data.uid)">
                  <img :src="data.avatar" alt="" />
                </div>
                <div class="author" @click="goUserHome(data.uid)">
                  <div class="author-name">{{data.username}}</div>
                  <div class="author-info">
                    {{data.lable}}
                  </div>
                </div>
              </div>
              <div class="right">
                <button :class=" !data.follow? 'follow':'follow active'" @click="handerFollowTv(data.uid,index)">
                  <i class="iconfont icon-jiahao"></i><span>{{!data.follow? '关注':'已关注'}}</span>
                </button>
              </div>
            </div>
            <div class="all-video">
              <UserVideo v-for="item in data.videos" :key="item.video_id" :videoData="item"></UserVideo>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
import http from '@/util/http'
import { mapState } from 'vuex'
import UserVideo from '@/components/video/userVideo.vue'
import TipsView from '@/components/utilView/tipView.vue'
export default {
  components: {
    UserVideo,
    TipsView
  },
  data () {
    return {
      userdata: [], // 推荐视频号
      uPage: 1, // 推荐视频号的页码,
      compomentList: [], // 优质视频号数据
      Tipsicon: 'icon-jinggao',
      Tipstext: ''
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted () {
    // 推荐视频号数据
    http.hotTvUser(this.uPage).then(res => {
      this.userdata = res.data.userdata
      console.log(res.data)
    })
    // 优质视频号数据（用户和视频）
    http.getUserlog().then(res => {
      console.log(res.data.data)
      this.compomentList = res.data.data
    })
  },

  methods: {
    tipsMethod (text) {
      this.$refs.childTips.HanderTiming(1200)
      this.Tipstext = text
    },
    // 跳转到其他用户的个人主页
    goUserHome (uuid) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      if (this.user.uid === uuid) {
        this.$router.push({ path: '/user/myhome' })
      } else {
        this.$router.push({ path: '/home/userHome', query: { uuid: uuid } })
      }
    },
    // 推荐用户处的事件
    // 关注用户
    handerFollow (uuid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // uuid视频号用户的id
      http.getFollowState(this.user.uid, uuid).then(res => {
        console.log(res.data.followState)
        this.userdata[index].follow = res.data.followState.state
      })
    },
    // 优质视频号推荐 处点击关注
    handerFollowTv (uuid, index) {
      // 校验登录
      const checkState = this.$checkU()
      if (!checkState) {
        this.tipsMethod('请先登录', 'icon-jinggao')
        return
      }
      // uuid视频号用户的id
      http.getFollowState(this.user.uid, uuid).then(res => {
        console.log(res.data.followState)
        this.compomentList[index].follow = res.data.followState.state
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.allviedeo-box {
  width: 100%;

  .allvideo-info-box {
    width: 100%;

    .hot-video {
      width: 100%;

      .hot-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: 24px;
            color: #333;
            padding-right: 15px;
          }
          .title-more {
            font-size: 14px;
            color: #939393;
          }
        }
        .title-right {
          font-size: 14px;
          color: #939393;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      .hot-video-info {
        width: 100%;

        .all-hot-video {
          width: 100%;
          margin-top: 20px;
          display: flex;

          .all-hot-video-box {
            width: 25%;
            background: #fff;
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            margin-left: 10px;

            .all-hot-author-items {
              padding: 15px 25px;
              min-height: 142px;
              .author-box-info{

                 .hot-author-img {
                width: 50px;
                height: 50px;
                margin: 10px auto;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #f5f5f5;

                img {
                  display: block;
                  width: 100%;
                  border-radius: 50%;

                  &:hover {
                    filter: brightness(90%);
                    opacity: 1;
                  }
                }
              }
              .hot-author-box {
                text-align: center;
                line-height: 20px;
                min-height: 90px;
                .follow-button {
                display: flex;
                flex-direction: column;
                align-items: center;

                .follow {
                  font-size: 14px;
                  font-weight: 700;
                  display: block;
                  width: 65px;
                  height: 28px;

                  border-radius: 15px;
                  border: 1px solid #f60;
                  color: #fff;
                  background: #ff9524;
                  margin-top: 10px;
                  cursor: pointer;
                  &:hover {
                    background: #f60;
                  }
                }
                .followed {

                  color: #333 !important;
                  background: #eee !important;
                  border: none;
                  cursor: not-allowed;
                  &:hover {
                    background: #e0e0e0;
                  }
                }
              }
              .author-box-text{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                 .hot-author-name {
                  color: #333;
                  padding-bottom: 5px;
                  cursor: pointer;
                  font-size: 14px;
                }
                .hot-author-info {
                  color: #939393;
                  font-size: 14px;
                  height: 40px;

                  display: -webkit-box;
                  -webkit-line-clamp: 2; //显示两行
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis; //多的用省略号显示
                  word-wrap: break-word; //在合适的点换行
                  word-break: break-all; //允许长单词换行到下一行

                  // padding-bottom: 15px ;
                }
              }

              }
              }

            }
          }
        }
      }
    }
    .hiq-video {
      width: 100%;
      margin-bottom: 50px;
      .hiq-video-title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-top: 20px;

        .title-left {
          display: flex;
          align-items: flex-end;
          margin-left: 10px;

          .title {
            font-weight: 600;
            font-size: 24px;
            color: #333;
            padding-right: 15px;
          }
        }
      }
      .all-hiq-video {
        width: 100%;

        .hiq-video-items {
          width: 100%;
          background: #fff;
          margin-top: 10px;
          margin-left: 10px;
          border-radius: 5px;
          // padding: 10px 20px;

          .header {
            width: 100%;
            display: flex;
            padding: 10px 0;
            justify-content: space-between;
            align-items: center;

            .left {
              width: auto;
              display: flex;
              align-items: center;
              .hiq-author-img {
                padding-left: 10px;
                width: 50px;
                height: 50px;
                margin-right: 10px;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #f5f5f5;
                cursor: pointer;

                img {
                  display: block;
                  width: 100%;
                  border-radius: 50%;

                  &:hover {
                    filter: brightness(70%);
                    opacity: 1;
                  }
                }
              }
              .author {
                color: #333;
                font-size: 16px;
                cursor: pointer;
                .author-info {
                  color: #939393;
                  font-size: 14px;
                  padding-top: 5px;
                }
              }
            }
            .right {
              // width: 20%;
              display: flex;
              align-items: center;
              padding-right: 15px;
              .follow {
                font-size: 12px;
                display: block;
                width: 65px;
                height: 28px;
                line-height: 14px;

                border-radius: 15px;
                border: 1px solid #f60;
                color: #f60;
                background: #fff;
                // margin-right: 10px;
                cursor: pointer;
                &:hover {
                  background: #fff2e5;
                }
              }
              .active {

                  color: #333 !important;
                  background: #eee !important;
                  border: 1px solid #000;
                  cursor: not-allowed;
                  &:hover {
                    background: #e0e0e0;
                  }
                }

            }
          }
          .all-video {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;

          }
        }
      }
    }
  }
}
</style>
